<template>
    <div></div>
</template>

<script>
import { getList } from '@/api/table'
export default {
    data() {
        return{
          
          getList: [],
        }
    },
    async created(){
      let res = await this.$api.Logs
      // this.dataList = res.data.data;
      console.log(res)
    },
    mounted() {
    var myChart = this.$echarts.init(document.getElementById('trend'))
    var trend = {
      data: [
        [0, 0, 28, 0, 0, 10, 143, 82, 0, 260, 5, 0],
        [0, 0, 3, 2, 0, 523, 50, 10, 5, 0, 0, 8],
        [0, 0, 6, 0, 6, 10, 57, 283, 13, 0, 15, 9, 9],
        [0, 0, 3, 3, 8, 10, 47, 630, 2, 3, 3, 0],
        [0, 2, 13, 5, 2, 8, 127, 8, 93, 25, 3, 8, 2]
      ]
    };
    var trendOption = {
      title: {
        text: '异常事件数量(包含PV)'
      },
      grid: {
        left: '3%',
        top: '26%',
        right: '3%',
        bottom: '4%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        left: 50,
        top: '13%',
        data: ['异常', '网络请求', '资源', 'PV', '卡顿'],
        icon: 'circle',
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 20,
        textStyle: {
          fontSize: 12
        }
      },
      xAxis: {
        type: 'category',
        data: ['新疆', '甘肃', '内蒙古', '河北', '河南', '湖北', '湖南', '浙江', '福建', '广西', '广东', '海南'],
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '异常',
          type: 'line',
          smooth: true,
          data: trend.data[0]
        },
        {
          name: '网络请求',
          type: 'line',
          smooth: true,
          data: trend.data[1]
        },
        {
          name: '资源',
          type: 'line',
          smooth: true,
          data: trend.data[2]
        },
        {
          name: 'PV',
          type: 'line',
          smooth: true,
          data: trend.data[3]
        },
        {
          name: '卡顿',
          type: 'line',
          smooth: true,
          data: trend.data[4]
        }
      ]
    }
    myChart.setOption(trendOption);
    },
    components: { getList }
}
</script>
<style lang="scss">
</style>
